<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page  import="java.util.*" %>
<%@ page import="com.google.gson.*" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<fmt:requestEncoding value="utf-8" />
<div class="col-xs-12">
	<div>
		<ol class="breadcrumb">
			<li><a href="/Reservation/main/index.res">홈</a></li>
			<c:if test="${ service.type eq 'gym' }">
				<li><a href="/Reservation/reserv/list.res?type=gym">체육시설</a></li>
			</c:if>
			<c:if test="${ service.type eq 'pub' }">
				<li><a href="/Reservation/reserv/list.res?type=pub">시설대관</a></li>
			</c:if>
			<li class="active">시설정보</li>
		</ol>
	</div>
	<div style="margin-bottom: 25px">
		<h4>${ service.title }</h4>
		<hr />
	</div>
	<div>
		<div class="col-md-3" style="height: 300px;">
			<img src="../img/fImg/${ facility.img }.jpg"
				alt="${ facility.name }"
				style="width: 200px; height: 200px; margin-left: -10px">
		</div>
		<div class="col-md-5" style="height: 300px;">
			<table style="margin-left: -20px">
				<tr>
					<th style="padding: 5px 10px 7px 0px">주소</th>
					<td style="padding: 5px 5px 7px 10px"><span>${ facility.addr }</span></td>
				</tr>
				<tr>
					<th style="padding: 5px 10px 7px 0px">전화번호</th>
					<td style="padding: 5px 5px 7px 10px"><span>${ facility.phone }</span></td>
				</tr>
				<tr>
					<th style="padding: 5px 10px 7px 0px">이용요금</th>
					<td style="padding: 5px 5px 7px 10px"><span>한타임당 ${ facility.fee }</span></td>
				</tr>
			</table>
		</div>
	</div>
	<div class="col-md-3" style="height: 300px" id="cal"></div>
	<div class="col-md-11"
		style="height: 1570px; padding: 25px 0px 0px 25px; border: 1px solid">
		<ul class="nav nav-tabs" id="subTab" style="margin-bottom: 40px">
			<li class="active"><a href="#detail">상세정보</a></li>
			<li><a href="#review">이용후기/평점</a></li>
		</ul>
		<!-- 상세정보 -->
		<div class="tab-content">
			<div class="tab-pane active" id="detail">
				<p style="color: #286090; font-weight: bold; font-size: 15px">1.
					공공시설 예약서비스 이용시 필수 준수사항</p>
				<div
					style="width: 800px; border: 1px solid #E7E7E7; padding: 10px 0px 10px 10px; font-size: 13px">
					모든 서비스의 이용은 담당 기관의 규정에 따릅니다. 각 시설의 규정 및 허가조건을 반드시 준수하여야 합니다.<br />
					각 관리기관의 시설물과 부대시설을 이용함에 있어 담당자들과 협의 후 사용합니다.<br /> 각 관리기관의 사고 발생시
					서울시청에서는 어떠한 책임도 지지않습니다.<br /> 시설이용료 납부는 각 관리기관에서 규정에 준 합니다.<br /> 본
					사이트와 각 관리기관의 규정을 위반할시에는 시설이용 취소 및 시설이용 불허의 조치를 취할 수 있습니다.
				</div>
				<br />
				<p style="color: #286090; font-weight: bold; font-size: 15px">2.
					시설예약</p>
				<div
					style="width: 800px; border: 1px solid #E7E7E7; padding: 10px 0px 10px 10px; font-size: 13px">
					비회원일 경우에는 실명 확인을 통하여 사용하실 수 있으며 서울시 통합 회원에 가입 하시게 되면 서울시에서 제공하는
					다양하고 많은 혜택을 받으실 수 있습니다.</div>
				<br />
				<p style="color: #286090; font-weight: bold; font-size: 15px">3.
					상세내용</p>
				<div
					style="width: 800px; border: 1px solid #E7E7E7; padding: 10px 0px 10px 10px; font-size: 13px">
					<span style="font-weight: bold; font-size: 14px">ㅁ시설현황</span><br />
					- 위 치 : 서울시 동작구 신대방길72<br /> - 면 적 : 123㎡<br /> - 수용규모 : 100명<br />
					- 장비현황 : 회의용탁자 24개, 회의용 의자 100개, 화이트 보드 1개, 유선마이크 2개(음향사용 가능),
					빔프로젝트 사용가능<br /> (※인터넷 사용은 불가)<br />
					<br /> <span style="font-weight: bold; font-size: 14px">ㅁ
						이용가능 시간</span> : 월(09:00~13:00), 화(09:00~18:00), 목(13:00~18:00)<br /> -
					자체사정(행사등)에 따라 변경 될수 있습니다.<br />
					<br /> <span style="font-weight: bold; font-size: 14px">ㅁ
						이용료</span> : 10,000원/1시간(※구 또는 동 주관 행사 시 이용료 면제)<br /> - 이용허가일로부터 2일 이내에
					이용료를 납부하지 않는 경우, 허가 취소 가능<br />
					<br /> <span style="font-weight: bold; font-size: 14px">ㅁ사용료
						반환</span><br /> 1.천재지변 등 불가항력의 사유로 인하여 이용이 취소된 경우 전액 반환<br /> 2.시설의 귀책사유로
					인하여 이용이 취소된 경우 전액 반환<br /> 3.본인 취소시 : 사용일 2일전 사용료의 90%, 1일전 사용료의
					80%<br /> (사용취소일로부터 7일이내 반환<br />
					<br /> <span style="font-weight: bold; font-size: 14px">ㅁ
						사용승인 제한</span><br /> 1. 특정 종교 활동 관련 행사<br /> 2. 정치단체의 집회 및 정치단체와 관련된 집회
					또는 행사<br /> 3. 영리행위를 목적으로 시설사용 신청을 한 때<br /> 4. 자치회관의 시설 또는 설비를 훼손할
					우려가 있어 관린상 사용이 부적절 한 때<br />
					<br /> <span style="font-weight: bold; font-size: 14px">ㅁ
						이용준수사항</span><br /> 1. 자치회관 내에서는 정숙하여야 하며 시설물을 소중하게 사용하여야 한다.<br /> 2.
					시설, 장비에 이상이 있을 경우, 임의로 조작하여서는 안되며 반드시 시설관리자의 안내를 받는다.<br /> 3. 시설,
					장비등의 사용시 물리적인 힘에 의해 장비가 손괴된 경우에는 사용자의 부담으로 보수하거나 그 비용을 변상하여야 한다. <br />
					4. 모든 대관은 현장 설치 및 철거시간 포함한 시간입니다.<br />
					<br /> <span style="font-weight: bold; font-size: 14px">ㅁ
						이용의 제한</span><br /> 1. 정신장애 및 음주자<br /> 2. 보호자를 동반하지 않은 6세 미만의 어린이<br />
					3. 청사관리 또는 안전유지상 입장을 불허할 필요가 있는 자<br /> 4. 기타 공익목적상 또는 시설물 유지관리상
					불허할 필요가 있는 자<br />
					<br /> <span style="font-weight: bold; font-size: 14px">ㅁ
						교통편</span><br /> &lt;대중교통 이용시&gt;<br /> -간선(파랑) 버스 : 150, 505, 507번
					대림시장(대림성모병원) 정류소 하차, 대림성모병원 맞은편 골목으로 5분 거리 <br /> -지선(초록) 버스 :
					5623, 5625, 5633, 5713, 6512번 대림시장(대림성모병원) 정류소 하차, 대림성모병원 맞은편 골목으로
					5분 <br /> -지선(초록) 버스 : 5524, 5526,5535번 신대방역 정류소 하차, 신대방전철역 4번 출구쪽
					향나무길 10분 거리 <br /> -지하철 2호선 : 신대방전철역 하차 4번 출구에서 8분 거리 <br /> -지하철
					7호선 : 보라매역 하차 3번 출구에서 버스 환승 약15분 소요 (간선 150, 505번, 지선 5531, 5536,
					5623, 5633번)<br />
					<br /> &lt;자가용 이용시&gt;<br /> -시흥대로 경기도 방향 동작상떼빌 앞에서 유턴 후 대림성모병원 맞은
					편 골목으로 우회전 <br /> -2호선 신대방전철역 4번 출구 방향으로 직진<br /> <span
						style="font-weight: bold; font-size: 14px">ㅁ 문의</span> :
					심지선(02-820-2809, jeesun7@dongjak.go.kr)
				</div>
				<br />
				<p style="color: #286090; font-weight: bold; font-size: 15px">4.
					주의사항</p>
				<div
					style="width: 800px; border: 1px solid #E7E7E7; padding: 10px 0px 10px 10px; font-size: 13px">
					<span style="font-weight: bold; font-size: 14px">ㅁ 사용승인의 제한</span><br />
					1. 특정 종교 활동 관련 행사<br /> 2. 정치단체의 집회 및 정치단체와 관련된 집회 또는 행사<br /> 3.
					영리행위를 목적으로 시설사용 신청을 한 때<br /> 4. 자치회관의 시설 또는 설비를 훼손할 우려가 있어 관리상 사용이
					부적절 한 때 <br />
				</div>
			</div>

			<!-- 이용후기/평점 -->
			<div class="tab-pane" id="review">
				[0/500]자<br />
				<ul>
					<li style="float: left; width: 130px; overflow: hidden;"><input
						type="radio" name="star" id="star" value="1" style="float: left;">
					<p class="star1"
							style="background: url('../img/imgStar.gif') no-repeat 0 -52px; float: left; width: 73px; height: 13px; overflow: hidden; margin: 3px 0 4px 3px;"></p></li>
					<li style="float: left; width: 130px; overflow: hidden;"><input
						type="radio" name="star" id="star" value="2" style="float: left;">
					<p class="star2"
							style="background: url('../img/imgStar.gif') no-repeat 0 -39px; float: left; width: 73px; height: 13px; overflow: hidden; margin: 3px 0 4px 3px;"></p></li>
					<li style="float: left; width: 130px; overflow: hidden;"><input
						type="radio" name="star" id="star" value="3" style="float: left;">
					<p class="star3"
							style="background: url('../img/imgStar.gif') no-repeat 0 -26px; float: left; width: 73px; height: 13px; overflow: hidden; margin: 3px 0 4px 3px;"></p></li>
					<li style="float: left; width: 130px; overflow: hidden;"><input
						type="radio" name="star" id="star" value="4" style="float: left;">
					<p class="star4"
							style="background: url('../img/imgStar.gif') no-repeat 0 -13px; float: left; width: 73px; height: 13px; overflow: hidden; margin: 3px 0 4px 3px;"></p></li>
					<li style="float: left; width: 130px; overflow: hidden;"><input
						type="radio" name="star" id="star" value="5" style="float: left;">
					<p class="star5"
							style="background: url('../img/imgStar.gif') no-repeat 0 0px; float: left; width: 73px; height: 13px; overflow: hidden; margin: 3px 0 4px 3px;"></p></li>
				</ul>
				<textarea style="width: 650px; height: 80px; margin-top: 5px"></textarea>
				<input class="btn btn-primary" id="okbtn" value="평가입력"
					style="width: 100px; height: 80px; margin-top: -65px;"
					type="button">
			</div>
		</div>
	</div>
</div>
<script>
	$('#subTab a').click(function (e) {
	  e.preventDefault()
	  $(this).tab('show')
	})
</script>